<template>
    <div :style="{
        height: '100vh',
        overflow: 'hidden',
        position: 'relative',
        border: '1px solid #ebedf0',
        borderRadius: '2px',
   
        width: '100%',
    }">
        <a-card :bordered="false" class="mb-2">
           
            <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
                <a-row :gutter="24">
                    <a-col :span="6">
                        <a-form-item label="项目名称" name="name">
                            <a-input v-model:value="searchFormState.name" placeholder="请输入项目名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="项目编号" name="code">
                            <a-input v-model:value="searchFormState.code" placeholder="请输入项目编号" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item label="商务负责人" name="director">
                            <a-input v-model:value="searchFormState.director" placeholder="请输入项目名称" />
                        </a-form-item>
                    </a-col>

                    <a-col :span="6" v-show="advanced">
                        <a-form-item label="项目进度" name="progress">
                            <a-select :getPopupContainer="trigger => trigger.parentNode" ref="select" v-model:value="searchFormState.progress"
                                :options="progressOptions"></a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :span="6">
                        <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
                        <a-button style="margin: 0 8px" @click="reset">重置</a-button>
                        <a @click="toggleAdvanced" style="margin-left: 8px">
                            {{ advanced ? '收起' : '展开' }}
                            <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
                        </a>
                    </a-col>
                    </a-row>
            </a-form>
        </a-card> <a-card :bordered="false">
            <s-table ref="tableRef" tableLayout="fixed" :data="loadData" bordered :row-key="(record) => record.id"
                :tool-config="toolConfig" :columns="columns" class="mb-2">
                <template #operator class="table-operator">
                    <div style="display: flex; justify-content: space-between">
                        <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="searchFormState.role" style="width: 120px" :options="roles"
                            :fieldNames="{ label: 'label', value: 'value' }" placeholder="本人">
                        </a-select>
                       
                    </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                </template>
            </s-table>
        </a-card>

    </div>
</template>

<script setup name="receivableMeetSale">
import { roles } from '@/utils/constants.js'
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const tableRef = ref()
const reset = () => {
    searchFormState.value = {}
}
// 查询区域显示更多控制
const advanced = ref(false)
const toggleAdvanced = () => {
    advanced.value = !advanced.value
}
const searchFormState = ref({
})

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 70,
    },
    {
        title: '供应商',
        dataIndex: 'supplier',
        key: 'supplier',
    },

    {
        title: '采购金额',
        dataIndex: 'purchaseAmount',
        key: 'purchaseAmount',
    },

    {
        title: '到期日',
        dataIndex: 'dueDate',
        key: 'dueDate'
    },
    {
        title: '已支付金额',
        dataIndex: 'paidAmount',
        key: 'paidAmount'
    },
    {
        titile: '应付金额',
        datAIndex: 'payableAmount',
        key: 'payableAmount'
    }
]

const loadData = (parameter) => {

    var result = {
        "code": 200,
        "msg": "操作成功",
        "data": {
            "records": [
                {
                    index: 1,
                    supplier: 'A公司',
                    purchaseAmount: 20000,
                    dueDate: '2022-01-31',
                    paidAmount: 10000,
                    payableAmount: 20000
                },
                {
                    index: 2,
                    supplier: "B企业",
                    purchaseAmount: 20000,
                    dueDate: "2021-12-31",
                    paidAmount: 8000,
                    payableAmount: 12000
                },
                {
                    index: 3,
                    supplier: "C有限公司",
                    purchaseAmount: 30000,
                    dueDate: "2022-03-31",
                    paidAmount: 5000,
                    payableAmount: 15000
                }
            ],
            "total": 1,
            "size": 20,
            "current": 1,
            "orders": [],
            "optimizeCountSql": true,
            "searchCount": true,
            "maxLimit": null,
            "countId": null,
            "pages": 1
        }
    }
    return new Promise((resolve) => {
        return resolve(result.data)
    })
}
loadData({}).then(res => {

    console.log("load data", res)
})
const refresh = (pId) => {
    console.log("fatch proId", pId)
}
// 重置表单,且设置默认值
const resetForm = () => {
    searchFormState.value.name = ""
    searchFormState.value.owner = ""
    searchFormState.value.progress = 0
    searchFormState.value.proNumber = ""
}

</script>
<style scoped></style>
